<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"></meta>
    <title>后台管理</title>
    <meta name="description" content="个人后台管理系统"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

    <link rel="stylesheet" type="text/css" href="/css/main.css"></link>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>
  </head>
  <body class="app sidebar-mini rtl">
    <!-- Navbar-->
    <div th:replace="common/html/back::header"></div>
    <!-- Sidebar menu-->
    <div th:replace="common/html/back::sidebar"></div>

    <main class="app-content">
      <div class="app-title">
        <div>
          <h1><i class="fa fa-dashboard"></i> 站长统计</h1>
          <p>网站统计信息展示</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
          <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
          <li class="breadcrumb-item"><a href="#">站长统计</a></li>
        </ul>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-3">
          <div class="widget-small primary coloured-icon"><i class="icon fa fa-file-text-o fa-3x"></i>
            <div class="info">
              <h4>文章数</h4>
              <p><b th:text="${baseStatistic.article_count}">5</b></p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="widget-small info coloured-icon"><i class="icon fa fa-heart fa-3x"></i>
            <div class="info">
              <h4>喜欢数</h4>
              <p><b th:text="${baseStatistic.love_count}">25</b></p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="widget-small warning coloured-icon"><i class="icon fa fa-eye fa-3x"></i>
            <div class="info">
              <h4>浏览量</h4>
              <p><b th:text="${baseStatistic.views}">10</b></p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="widget-small danger coloured-icon"><i class="icon fa fa-star fa-3x"></i>
            <div class="info">
              <h4>IP</h4>
              <p><b th:text="${baseStatistic.ip_count}">500</b></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="tile">
            <h3 class="tile-title">IP分布</h3>
            <div class="embed-responsive embed-responsive-16by9">
              <canvas class="embed-responsive-item" id="pieChartDemo"></canvas>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- Essential javascripts for application to work-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.3/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="/js/main.js"></script>
    <!-- Page specific javascripts-->
    <script type="text/javascript" src="https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script type="text/javascript">
		window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };

		var config = {
			data: {
				datasets: [{
					data: [],
					backgroundColor: [],
					label: 'My dataset' // for legend
				}],
				labels: []
			},
			options: {
				responsive: true,
				legend: {
					position: 'right',
				},
				title: {
					display: false,
					text: 'XXXXXX'
				},
				scale: {
					ticks: {
						beginAtZero: true
					},
					reverse: false
				},
				animation: {
					animateRotate: false,
					animateScale: true
				}
			}
		};
        var ctx = document.getElementById('pieChartDemo');
		window.myPolarArea = Chart.PolarArea(ctx, config);
		var colorNames = Object.keys(window.chartColors);
		window.onload = function() {
			$.ajax({
                url:'/back/polardata',
                method: 'post',
                dataType: 'json',
                success: function(result){
                    //console.log(result);
                    //console.log(result instanceof Array);
                    for(var i=0; i<result.length; i++){
                        config.data.labels.push(JSON.parse(result[i].belong_place).city);
                        //console.log(typeof(JSON.parse(result[i].belong_place)));
                        config.data.datasets.forEach(function(dataset) {
                            var colorName = colorNames[config.data.labels.length % colorNames.length];
                            dataset.backgroundColor.push(window.chartColors[colorName]);
                            dataset.data.push(result[i].belong_count);
                        });
                    }
                    window.myPolarArea.update();
                }
			});
		};
    </script>
  </body>
</html>